/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../base/basic-var.less';
@import '../custom.less';
@import '../mixins/hairline.less';
@import './vars.less';

@multi-select-item-prefix-cls: ~'@{css-prefix}mobile-multi-select-item';

.@{multi-select-item-prefix-cls} {
  width: 100%;
  height: var(--ti-mobile-multi-select-item-height);
  padding: 0 var(--ti-mobile-multi-select-item-padding-horizontal);
  line-height: var(--ti-mobile-multi-select-item-height);
  background: var(--ti-mobile-multi-select-item-bg-color);
  color: var(--ti-mobile-multi-select-item-text-color);
  font-size: var(--ti-mobile-multi-select-item-font-size);

  &:active {
    background-color: var(--ti-mobile-multi-select-item-bg-color-touch);
  }

  &.is-active {
    color: var(--ti-mobile-multi-select-item-text-color-active);
    font-weight: var(--ti-mobile-multi-select-item-font-weight-active);
  }

  &.is-disabled {
    color: var(--ti-mobile-multi-select-item-text-color-disabled);

    .@{multi-select-item-prefix-cls}__suffix-icon svg {
      fill: var(--ti-mobile-multi-select-item-icon-color-disabled);
    }
  }

  &__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__content {
    display: flex;
    align-items: center;
  }

  &__content-indent {
    display: inline-block;
    height: 100%;
    width: var(--ti-mobile-multi-select-item-indent-width);
  }

  &__suffix-icon {
    line-height: 1;
    transform-origin: center;
    transition: all linear 0.3s;
  }
}
